<div id="OneUserView" class="OneContainer">
  <div class="Panel PanelBlack">
    <div class="PanelTitle">用户 {{ username }}</div>
    <div class="PanelBody">
      <div class="row">
        <div class="col-sm-3">
          <p>基础展示信息</p>
          <div class="PanelItem">创建时间 {{ createDate }}</div>
          <div class="PanelItem">最后上线 {{ lastDate }}</div>
          <div class="PanelItem">拥有的服务器 {{ ServerLen }} 个</div>
        </div>
        <div class="col-sm-9">
          <div class="row">
            <div class="col-sm-5">
              <p>用户名 [字母 数字 下划线] (6~18位)</p>
              <div class="input-group input-group-sm">
                <span class="input-group-addon"> 用户名 </span>
                <input type="text" class="form-control" v-model="username" />
              </div>
            </div>
            <div class="col-sm-7">
              <p>密码 [字母 数字 下划线] (6~18位)</p>
              <div class="input-group input-group-sm">
                <span class="input-group-addon"> 账号密码 </span>
                <input type="text" class="form-control" v-model="password" placeholder="[未更改 您可以直接从这里重设此用户的密码]" />
              </div>
            </div>
          </div>

          <p>准许的服务器，输入服务器名字，分别以空格分割</p>
          <p>注意，如果是以#开头的最高权限账号，则可以无条件访问任何服务器</p>
          <div class="input-group input-group-sm">
            <span class="input-group-addon"> 准许的服务器 </span>
            <input type="text" class="form-control" v-model="allowedServer" placeholder="默认空，列如 ServerNameA ServerNameB ServerNameC" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <p><b>关于多用户</b></p>
          <p>
            您可以分配多个子用户并设置对应可控服务器实例，让子用户有且只有管理自己的实例权限。
            <br />
            若用于出租商业给用户，建议搭配 Docker 虚拟化容器使用，否则宿主机将有安全隐患。
          </p>
          <p><b>关于修改用户名</b></p>
          <p>
            请尽可能减少“修改用户名”操作，因面板以用户名作为唯一标识符。
            <br />
            当用户在线时被修改用户名，很容易出现未知错误。
          </p>
          <div class="Line"></div>
          <div class="PanelItemMuem">
            <button class="btn btn-success" v-on:click="toUpdate()">更新配置</button>
            <button class="btn btn-danger" v-on:click="toDeleteUser()">删除此用户</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  MI.rListener("onload", function () {
    VIEW_MODEL.newVue("OneUserView", {
      el: "#OneUserView",
      data: {
        ServerLen: 0,
        password: "",
        oldUsername: "",
      },
      methods: {
        toUpdate: function () {
          if (!TOOLS.isStdText(this.username)) {
            TOOLS.pushMsgWindow("用户名不合法！请重新输入！");
            return;
          }
          if ((this.password.length < 6 || this.password.length > 18) && this.password.length != 0) {
            TOOLS.pushMsgWindow("密码长度不正确！");
            return;
          }
          var allowedServers = this.allowedServer.trim().split(" ");
          var obj = {
            newUsername: this.username,
            newPassword: this.password,
            allowedServer: allowedServers,
            username: this.oldUsername,
          };
          WS.sendMsg("userset/upinfo", JSON.stringify(obj));
          //返回到上层
          RES.redirectPage("./template/userset.html", "userset/update");
        },
        toDeleteUser: function (itemUsername) {
          var obj = {
            username: this.oldUsername,
          };
          WS.sendMsg("userset/delete", JSON.stringify(obj), function () {
            RES.redirectPage("./template/userset.html", "userset/update");
          });
        },
      },
    });
    var viewModel = VIEW_MODEL["OneUserView"];
    viewModel.oldUsername = viewModel.username + " ";
    viewModel.ServerLen = viewModel.allowedServer.length;
    viewModel.allowedServer = viewModel.allowedServer.toString().replace(/,/gim, " ");
  });

  MI.rListener("onend", function () {});
</script>
